<template>
	<div class="divisional">
		<div class="search_box" style=" margin-right: 20px;">
			<el-row :gutter="30">
				<el-col :span="6">
					<span class="inpText">身份证号</span>
					<el-input v-model="identificationNumber" autocomplete="off" size="small" class="searchInp" placeholder="请输入内容"
					 style="width: 60%;"></el-input>
				</el-col>
				<el-col :span="6">
					<span class="inpText">委外公司名称</span>
					<el-input v-model="outsourcingCompany" autocomplete="off" size="small" class="searchInp" placeholder="请输入内容" style="width: 60%;"></el-input>
				</el-col>
				<el-col :span="6">
					<span class="inpText">卡号</span>
					<el-input v-model="cardNumber" autocomplete="off" size="small" class="searchInp" placeholder="请输入内容" style="width: 60%;"></el-input>
				</el-col>
				<el-col :span="6">
					<el-button size="small" type="primary" @click="search" v-if="$requestBtnApi.testss.queryBtnss">查询</el-button>
					<el-button size="small" type="primary" @click="reset">重置</el-button>
					<el-button size="small" type="primary" @click="exportExcel">下载模板</el-button>
					<el-upload style="display: inline-block;margin-left: 10px;" class="upload" action="" :multiple="false"
					 :show-file-list="false" accept="csv, application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
					 :http-request="httpRequest">
						<el-button size="small" type="primary">上传文件</el-button>
					</el-upload>
				</el-col>
			</el-row>

		</div>
		<el-row :gutter="20">
			<el-col :span="24">
				<el-table ref="pageTable" :data="tableData" :header-cell-style="{background:'LightYellow	',color:'black'}"
				 max-height="400" style="width: 100%">
					<!-- <el-table-column type="selection" :selectable='disableCheck'></el-table-column> -->
					<el-table-column prop="cardNumber" label="卡号" :formatter="hidInfo"></el-table-column>
					<el-table-column prop="name" label="姓名"></el-table-column>
					<el-table-column prop="identificationNumber" label="身份证号":formatter="hidInfo"></el-table-column>
					<el-table-column prop="outCompanyName" label="委外公司名称"></el-table-column>
					<el-table-column prop="currentDate" label="预留时间"></el-table-column>
					<el-table-column prop="allotConfirm" label="审批状态">
						<template slot-scope="scope">
							<p v-if="scope.row.allotConfirm=='1'">未审批</p>
							<p v-if="scope.row.allotConfirm=='2'">已审批</p>
						</template>
					</el-table-column>
					<el-table-column fixed="right" label="操作" width="150">
						<template slot-scope="scope">
							<el-button @click="handleClick(scope.row)" type="text" size="small" v-if="$requestBtnApi.testss.ShenpiBtnss">审批</el-button>
						</template>
					</el-table-column>
				</el-table>
			</el-col>
		</el-row>
		<div class="pageBox">
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
			 :page-sizes="[5, 10, 15,20]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
		</div>
	</div>
</template>
<script>
	import {
		cmcUrl
	} from '../../../../static/baseUrl'
	import {
		Message
	} from "element-ui";
	const ExportJsonExcel = require('js-export-excel')
	export default {
		data() {
			return {
				identificationNumber: "",
				cardNumber: "",
				outsourcingCompany: "",
				excelTitle: ['批次号', '卡号', '身份证号', '委外公司名称', '上次下发的文件名称', '支行机构编码', '分行机构编码'], //导出excel的表头，与excelColumn，需一一对应
				excelColumn: ['oldBatchNumber', 'cardNumber', 'identificationNumber', 'outCompanyName', 'allotFileName',
					'zhiInstitution', 'fenInstitution'
				], //导出excel每列对应的数据，

				showTableTwo: false,
				allSelect: [],
				pageSelect: [],
				getRowKeys(row) {
					return row.id;
				},

				currentPage: 1,
				total: 0,
				pageSize: 10,


				tableData: [],


				infoRecords: [],
				//分案状态
				stateOp: this.GLOBAL.stateOptions,
			};
		},
		created() {
			this.$route.meta.menuList.map((item) => {
				console.log(item, "ITEM");
				if (item.eleName == "查询") {
					this.$requestBtnApi.testss.queryUrlss = item.eleUrl;
					this.$requestBtnApi.testss.queryTypess =
						item.operType == "delete" ? "dele" : item.operType;
					this.$requestBtnApi.testss.queryBtnss = true;
				} else if (item.eleName == "新增") {
					this.$requestBtnApi.testss.addUrlss = item.eleUrl;
					this.$requestBtnApi.testss.addTypess =
						item.operType == "delete" ? "dele" : item.operType;
					this.$requestBtnApi.testss.addBtnss = true;
				} else if (item.eleName == "编辑") {
					this.$requestBtnApi.testss.DetailsUrlss = item.eleUrl;
					this.$requestBtnApi.testss.DetailsTypess =
						item.operType == "delete" ? "dele" : item.operType;
					this.$requestBtnApi.testss.DetailsBtnss = true;
				} else if (item.eleName == "删除") {
					this.$requestBtnApi.testss.delUrlss = item.eleUrl;
					this.$requestBtnApi.testss.delTypess =
						item.operType == "delete" ? "dele" : item.operType;
					this.$requestBtnApi.testss.delBtnss = true;

				} else if (item.eleName == "审批") {
					this.$requestBtnApi.testss.ShenpiUrlss = item.eleUrl;
					this.$requestBtnApi.testss.ShenpiTypess =
						item.operType == "delete" ? "dele" : item.operType;

					this.$requestBtnApi.testss.ShenpiBtnss = true;

				}
			});
			this.checkInfo();
		},
		methods: {
			httpRequest(e) {
				let file = e.file // 文件信息
				console.log('e: ', e)
				console.log('file: ', e.file)

				if (!file) {
					// 没有文件
					return false
				} else if (!/\.(xls|xlsx)$/.test(file.name.toLowerCase())) {
					// 格式根据自己需求定义
					this.$message.error('上传格式不正确，请上传xls或者xlsx格式')
					return false
				}
				this.fileName = file.name;
				const fileReader = new FileReader()
				fileReader.onload = (ev) => {
					try {
						const data = ev.target.result
						const workbook = XLSX.read(data, {
							type: 'binary' // 以字符编码的方式解析
						})
						const exlname = workbook.SheetNames[0] // 取第一张表
						const exl = XLSX.utils.sheet_to_json(workbook.Sheets[exlname]) // 生成json表格内容
						console.log(exl)
						// 将 JSON 数据挂到 data 里
						this.importData = exl;
						this.importData.forEach((item) => {
							console.log("item,,", item);
						});

						this.uploadData();
					} catch (e) {
						console.log('出错了：：')
						return false
					}
				}
				fileReader.readAsBinaryString(file)
			},
			uploadData() {
				if (this.importData.length > 0) {
					let dataArr = this.translateKeys();
					let params = {
						fileName: this.fileName,
						type: 1, //1为民事
						datas: JSON.stringify(dataArr),
					}
					this.$axios({
							method: "post",
							url: `/CMC/reserver/uploadFileRece`,
							data: params,
						})
						.then((res) => {
							console.log(res, "上传数据");
							if (res.code == 200) {
								//this.tableData = res.data.list;
								this.$message.success(res.message);
								this.checkInfo();
							} else {
								this.$message.success(res.message);
							}
						})
						.catch((err) => {});
				} else {
					console.log("this.importData.length==", this.importData.length);
					Message.warning("文档数据为空，请检查！");
				}

			},
			translateKeys() {
				let tempArr = [];
				Object.keys(this.importData).forEach((item) => {
					let tempMap = {};
					let mm = this.importData[item];

					Object.keys(this.excelTitle).forEach((item) => {
						let ss = this.excelTitle[item];
						let key = this.excelColumn[item];
						if (mm[ss]) {
							this.$set(tempMap, key, mm[ss]);
						} else {
							this.$set(tempMap, key, "");
						}

					});
					tempArr.push(tempMap);
				})
				return tempArr;
			},
			indexMethod(index) {
				index = (index + 1) + (this.currentPage - 1) * this.pageSize;
				return index
			},
			search() {
				this.currentPage = 1;
				this.checkInfo();
			},

			handleCurrentChange(data) {
				this.currentPage = data;
				this.checkInfo();
			},
			handleSizeChange(data) {
				console.log(data, "handleSizeChange");
				this.pageSize = data;
				this.checkInfo();
			},

			/* 开始 */
			handleClick(data) {
				if (data.allotConfirm == '2') {
					this.$message({
						type: 'success',
						message: '您已经审批过了!'
					});
				} else {
					this.$confirm('确认审批吗？, 是否继续?', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {


						console.log(data, "sss");
						let options = {
							cardNumber: data["cardNumber"],
							batchNumber: data["batchNumber"]
						}
						var allotConfirm = data["allotConfirm"];
						if (allotConfirm == '2') {
							return;
						}
						this.$axios({
								method: "post",
								url: `/CMC/reserver/updataConfirm`,
								data: options,
							})
							.then((res) => {
								console.log(res, "查询数据");
								if (res.code == 200) {
									this.$message({
										type: 'success',
										message: '审批成功!'
									});
									this.checkInfo();
								} else {
									Message.warning(res.message);
								}
							})
							.catch((err) => {
								console.log(err)
							});

					}).catch(() => {
						this.$message({
							type: 'info',
							message: '已取消审批'
						});
					});

				}
			},

			/* 结束 */
			reset() {
				this.identificationNumber = '';
				this.outsourcingCompany = '';
				this.cardNumber = '';
			},
			checkInfo() {


				let identificationNumber = this.identificationNumber;
				let outsourcingCompany = this.outsourcingCompany;
				let cardNumber = this.cardNumber;
				let options = {
					identificationNumber: identificationNumber,
					outsourcingCompany: outsourcingCompany,
					cardNumber: cardNumber,
					page: this.currentPage,
					pageSize: this.pageSize,
				};


				this.$axios({
						method: "post",
						url: `/CMC/reserver/selectReservedData`,
						data: options,
					})
					.then((res) => {
						console.log(res, "查询数据");
						if (res.code == 200) {
							this.tableData = res.data.list;
							this.total = Number(res.data.total);
						} else {
							Message.warning(res.message);
						}


					})
					.catch((err) => {});
			},

			//取消重新分案
			cancelRe() {
				this.detailInfo = [];
				this.isRedivision = false;
			},
			exportConfirm() {
				let msg = "是否导出当前检索结果数据?";
				//let removeid = data.id;
				this.$confirm(msg, "提示", {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'success'
				}).then(() => {
					this.exportExcel();
					console.log("导出数据成功！");
				}).catch((err) => {
					console.log("err", err)
				});
			},
			exportExcel() {
				var moment = require("moment");
				var aData = moment(new Date()).format("YYYY-MM-DD-HH-mm-ss");
				let option = {};
				option.fileName = '预留案件模板_' + aData
				let Obj = [{
					"": ""
				}];
				option.datas = [{
					sheetData: Obj,
					sheetName: '分预留数据模板',
					sheetFilter: this.excelColumn,
					sheetHeader: this.excelTitle,
					//columnWidths: [10, 10, 20, 10] //对应的列宽，置为屏宽的百分比，40%
				}, ];

				var toExcel = new ExportJsonExcel(option);
				toExcel.saveExcel();
			}
		},
	};
</script>
<style lang="scss" scoped>
	.divisional {
		/deep/ .el-row:nth-child(1) {
			width: 100%;
			height: 66px;
			// background: pink;
			padding: 0;
			margin: 0;

			.el-col {
				padding: 0;
				height: inherit;
				/* border: 1px solid slategrey; */
				box-sizing: border-box;
				overflow: hidden;

				div:nth-child(1) {
					width: 100%;
					height: inherit;
					//   background: yellowgreen;
					display: flex;
					flex-wrap: wrap;
					// justify-content: flex-start;
					justify-content: space-around;
					box-sizing: border-box;
					/* padding-left: 30px;
           padding-top: 40px; */
					overflow-y: auto;

					.v_box {
						width: 20%;
						height: 8vh;
						margin-left: 15px;
						margin-right: 40px;
						// margin-bottom: 10px;
						// background: chocolate;
						overflow: hidden;
						display: flex;
						flex-direction: column;
						padding: 0;
						border: none;

						div {
							padding: 0;
						}

						&:nth-child(7) {

							.el-date-editor--daterange.el-input,
							.el-date-editor--daterange.el-input__inner,
							.el-date-editor--timerange.el-input,
							.el-date-editor--timerange.el-input__inner {
								width: 100%;
							}
						}

						&:last-child {
							display: flex;
							flex-direction: row;
							justify-content: center;
							align-items: center;

							.el-button {
								width: 70px;
								height: 30px;

								&:first-child {
									margin-right: 10px;
								}
							}
						}
					}
				}
			}
		}

		/deep/ .el-row:nth-child(2) {
			width: 100%;
			/* height: 60vh; */
			// background: pink;
			padding: 0;
			margin: 0;
			margin-top: 10px;

			table {
				tbody {
					tr {
						td {
							.cell {
								box-sizing: border-box;
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: nowrap;
								word-break: normal !important;
								line-height: inherit;
								//   padding-right: 10px;
							}
						}
					}
				}
			}
		}

		.pageBox {
			display: flex;
			width: 100%;
			justify-content: left;
			margin-top: 10px;
		}


		/deep/ .el-dialog {
			.mainInfoBox {
				width: 100%;
				max-height: 60vh;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: flex-start;
				flex-wrap: wrap;
				overflow-y: auto;

				.infoBox {
					display: flex;
					flex-direction: row;
					justify-content: center;
					align-items: center;
					height: 40px;
					width: 30%;

					label {
						width: 100px;
					}

					.el-input {
						flex: 1 1 auto;
					}
				}
			}
		}
	}


	.search_box {
		background: #fff;
		border-radius: 10px;
		padding: 30px 30px 30px 30px;
		margin: 0 0 20px 0;
	}

	.box_center {
		text-align: left;
	}

	.searchBtn {
		margin-left: 80px;
	}

	.search_box .inpText {
		width: 75px;
		justify-content: space-between;
		text-align: right;
		display: inline-block;
	}
</style>
